<template>
    <div v-if="showFlag" v-loading="isLoading">
        <el-alert
                title="未支付的订单会在15分钟后自动清除，清除后无法支付"
                type="warning"></el-alert>
        <el-table
                :data="orderList"
                style="width: 100%"
                empty-text="没有未支付的订单哦">
            <el-table-column
                    prop="orderId"
                    label="订单编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="orderTotal"
                    label="待支付金额"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="orderTotal"
                    label="收货地址">
                <template width="100" slot-scope="scope">
                    <span>{{address}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="showPayDialog(scope.$index, scope.row)">支付
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="支付" width="400px" center :visible.sync="showPay">
            <el-form :model="payForm" :rules="payFormRules" status-icon ref="ruleForm"
                     class="demo-ruleForm">
                <el-form-item prop="info" label="商家留言">
                    <el-input
                            type="textarea"
                            autosize
                            placeholder="请输入留言"
                            v-model="payForm.info">
                    </el-input>
                </el-form-item>
                <el-form-item prop="payType" label="付款方式">
                    <el-radio v-model="payForm.payType" label="WeChat">
                        <i><img src="../../assets/images/inchageIcon/wechat.png" alt="微信支付"></i>
                    </el-radio>
                    <el-radio v-model="payForm.payType" label="AliPay">
                        <i><img src="../../assets/images/inchageIcon/alipay.png" alt="支付宝"></i>
                    </el-radio>
                    <el-radio v-model="payForm.payType" label="ZmallPay">
                        <i><img src="../../assets/images/inchageIcon/zmallpay.png" alt="zmall支付"></i>
                    </el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="payOrder()" style="width:100%;">支付
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        name: 'MyOrderUnpay',
        data() {
            return {
                orderList: [],
                address: '',
                showPay: false,//支付弹窗
                payForm: {
                    info: "",
                    payType: null
                },
                payFormRules: {
                    info: [{required: true, message: '请输入给商家的留言', trigger: "blur"}],
                    payType: [{required: true, message: '请选择支付方式', trigger: "blur"}]
                },
                showFlag: false,//加载页面
                isLoading: true//
            };
        },
        methods: {
            getUserOrderUnpay() {
                this.$axios
                    .get("/item/getuserunpayment", {
                        params: {
                            "userId": this.$store.getters.getUser.id
                        }
                    })
                    .then(res => {
                        if (res.data.result === null) {
                            this.orderList = [],
                                this.address = '';
                            this.showFlag = true;
                            this.isLoading = false;
                        } else {
                            this.orderList.push(res.data.result);
                            this.getUserAddress(res.data.result.addressId);
                            this.showFlag = true;
                            this.isLoading = false;
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            getUserAddress(id) {
                this.$axios
                    .get("/item/getaddress", {
                        params: {
                            "addressId": id
                        }
                    })
                    .then(res => {
                        this.address = res.data.result.streetName
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    })
            },
            showPayDialog(index, row) {
                this.showPay = true;
            },
            //支付订单
            payOrder() {
                console.log(this.payForm.info);
                console.log(this.payForm.payType);
                this.$axios
                    .post("/item/payorder", {
                        "id": this.$store.getters.getUser.id,
                        "info": this.payForm.info,
                        "payType": this.payForm.payType,
                        "username": this.$store.getters.getUser.username
                    })
                    .then(res => {
                        if (res.data.result == 1) {
                            this.notifySucceed("支付成功");
                            this.showPay = false;
                            this.getUserOrderUnpay();
                        } else if (res.data.result == -2) {
                            this.notifyError("您的余额不足请先充值");
                        }
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
        },
        created() {
            this.getUserOrderUnpay();
        }
    };
</script>

<style scoped>
    .pagination {
        height: 50px;
        text-align: center;
    }
</style>
